#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>澳邮国际商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <!-- 样式 Start -->
    <style type="text/css" lang="less">.van-card{padding: 10px 15px;} #orderdetail .van-card{background:#fff;border-bottom:1px solid #eee;} #orderdetail .van-card__img{width:60px;height:60px;} #orderdetail .red{color:#cb3029;} #orderdetail .van-col-12{width:50%;} #orderdetail .van-cell-group{margin-bottom:10px;} #orderdetail .delivery{padding-bottom:2rem} #orderdetail .cell_title{font-weight:bold;} #orderdetail .content{margin-bottom:80px;} #orderdetail .color_38f{color:#38f;} #orderdetail .cls_btn{margin:1rem auto} #orderdetail .van-hairline--top-bottom::after{border-width:0} #orderdetail .van-collapse-item .van-cell__label{color:orange;margin-top: 0px;line-height: 14px;} /* 地址簿样式 Start */ #orderdetail .van-address-list__edit{right:30px;} #orderdetail .van-address-list{height:94%;overflow-y:scroll;padding-bottom:0;} #orderdetail .addrList{top:10%;padding-bottom:50px;} #orderdetail .addr_p{margin-top:0;} #orderdetail .addr_p span{padding-left:1rem;} /* 地址簿样式 End */ .pkg-cell .van-cell__title{ color: #333333; } .pkg-cell .van-cell__value{ flex: 0; } .pkg-cell .van-cell__label{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #969799 !important; } .pkg-content{ margin-top: 10px; } .card-content .van-card__thumb{ width: 60px; height: 60px; } .card-content .van-card__content{ height: 70px; } .cost-content{ padding: 10px 0px 0px; } .tag-copy{ margin-top: -8px; } .cost-content .van-cell{ line-height: 12px; padding: 5px 15px; font-size: 12px; } .cost-content .van-cell__title{ color:#969799; } .discounts-cell .van-cell__title{ color:#969799; flex: 1.5; } .discounts-cell .van-cell__value{ flex: 0.5; } .cost-use{ padding: 10px 15px; background-color: #fdfdfd; position: relative; } .cost-use .van-cell{ line-height: 12px; padding: 5px 15px; font-size: 12px; background-color: #eee; } .cost-use .van-cell__value{ font-size: 16px; } .icon-arrow{ position: absolute; right: 40px; top: 0px; } .cost-content .van-cell__right-icon{ line-height: 15px; } .suspend{ width: 100%; height: 100%; position: relative; z-index: 999; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; } .suspend-content{ width: 244px; height: 55px; position: fixed; top: 70%; z-index: 900; } .suspend-content-left{ width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 8px; padding: 3px; box-sizing: border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-top: 10px; float: left; } .suspend-icon{ float: left; width: 10px; height: 30px; padding: 5px 0px; margin-right: 3px; font-size: 14px; } .suspend-navigation{ float: left; width: 25px; height: 30px; padding: 5px 0px; box-sizing: border-box; font-size: 10px; } .suspend-navigation2{ float: left; width: 25px; height: 30px; padding: 10px 0px; box-sizing: border-box; font-size: 10px; } .suspend-content-right{ width: 200px; height: 60px; background-color: #fff; float: left; border-top-left-radius:5px; border-bottom-left-radius:5px; padding: 15px 10px; box-sizing: border-box; } .suspend-content-right .van-col{ text-align: center; } .suspend-contact{ font-size: 20px; } .suspend-contact-text{ font-size: 10px; transform: scale(0.7); } .content .van-tabbar-item--active{ color: #7d7e80; } .goods-detail{ margin-top: 10px; } .order-amount-cell{ padding: 5px 15px !important; } .order-amount-cell .van-cell__title{ color: #323233; font-size: 14px; font-weight: 600; } .order-amount-cell .van-cell__value{ color: #323233; font-size: 14px; font-weight: 600; } .cost-use-detail{ color: #969799; font-size: 10px; text-align: right; width: 100%; } .cost-use-account{ color: #969799; font-size: 12px; width: 100%; padding: 2px 0px; box-sizing: border-box; } .cost-use-actually{ color: #323233; font-size: 14px; width: 100%; font-weight: 600; } .use-actually-right{ color: #f44; font-size: 16px; float: right; } .order-line-content{ height: 10px; position: relative; background-color: #fff; } .order-line{ width: 90%; border-bottom: 1px solid #eee; position: absolute; bottom: 0; left: 0; } .order-line2{ width: 7%; border-bottom: 1px solid #eee; position: absolute; bottom: 0; right: 0; } .arrow-icon{ position: absolute; bottom: -4px; left: 90%; color: #eee; } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .back-tabbar{ color: #f44 !important; } .van-step--vertical { float: none; display: block; font-size: 12px; line-height: 15px; padding: 1px 10px 2px 0 !important; box-sizing: border-box; } .order_bt{ margin-top: 5px; } .pop-logistics{ width: 80%; height: 70%; top: 43%; border-radius:10px; } .pop-title{ width: 100%; font-size: 18px; font-weight: 550; color: #fff; text-align: center; padding: 15px 0px; box-sizing: border-box; background-color: #4d94ec; position: relative; border-top-left-radius:9px; border-top-right-radius:9px; } .closed-icon{ position: absolute !important; top: 20px; right: 10px; z-index: 999; } .logi-card-content{ width: 100%; padding: 0px 10px 15px; box-sizing: border-box; background-color: #4d94ec; font-size: 14px; color: #fff; display: flex; } .card-img{ width: 60px; height: 60px; } .card-content-right{ flex: 1; margin-left: 10px; } .goods-title{ -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .step-content{ width: 100%; padding: 10px 15px; box-sizing: border-box; height: 70%; background-color:#fff; border-bottom-left-radius:15px; border-bottom-right-radius:15px; overflow-y: scroll; } .tabbar-content{ width: 100%; height: 50px; position: fixed; bottom: 0; left: 0; background-color: #fff; text-align: right; line-height:50px; z-index: 900; border-top:1px solid #eee; padding-bottom: 20px; } .tabbar-content .van-button--small{ height: 30px; line-height: 28px; margin-right: 10px; font-size: 14px; padding:0 12px; } .pay-notice{ padding: 15px; font-size: 12px; color: #fff; background-color: #f44; } .goods-active .van-card{ padding: 10px 0px; } .van-collapse-item__content{padding:0 1rem 1rem 1rem;} .pkg-bt{ padding: 0.5rem 0rem 0rem; width: 100%; box-sizing: border-box; text-align: right; border-top:1px solid #f2f2f2; } .van-card__price{ color: #323233; } .pkg-img{ width: 60px; height: 60px; margin-right:10px; } .pkg-goods .van-cell__title{ -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient:
      vertical; } /*.step_record{ -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }*/</style>
    <!-- 样式 End -->
    <!-- 内容 Start -->
    <div id="orderdetail" class="container">
      <input type="hidden" id="orderId" value="#(order.id)">
      <input type="hidden" id="orderSn" value="#(order.sn)">
      <div class="content">
      	#if(order.status=="PENDING_PAYMENT")
      	<div class="pay-notice">
      		<div>请您在<span id="countdownHour">00</span>:<span id="countdownMinute">00</span>:<span id="countdownSecond">00</span>内完成支付，超时订单自动取消</div>
      	</div>
      	#end
        <!---->
        <div class="goods-detail van-cell-group van-hairline--top-bottom">
          <div>
          
             #for(orderItem : order.orderItems)
            <div class="card-content van-card van-card--center">
              <a class="van-card__thumb">
                <img src="#(imageUrl(orderItem.image))" class="van-card__img">
                <!----></a>
              <div class="van-card__content">
                <div class="van-card__title">#(orderItem.name)</div>
                <!---->
                <div class="van-card__bottom">
                  <div class="van-card__price">￥ #(orderItem.price)</div>
                  <!---->
                  <div class="van-card__num">x #(orderItem.quantity)</div></div>
              </div>
              <!----></div>
               #end
              
          </div>
        </div>
        <!---->
        <div class="cost-content van-cell-group van-hairline--top-bottom">
          <!-- <div class="van-cell van-cell--borderless">
           
            <div class="van-cell__title">
              <span>商品总价</span>
             </div>
            <div class="van-cell__value">
              <span>￥ </span></div>
           </div> -->
          <div class="van-cell van-cell--borderless">
            <!---->
            <div class="van-cell__title">
              <span>物流费用</span>
              <!----></div>
            <div class="van-cell__value">
              <span>￥ #(order.freightPrice??"0.00")</span></div>
            <!----></div>
          <div class="order-amount-cell van-cell van-cell--borderless">
            <!---->
            <div class="van-cell__title">
              <span>订单总价</span>
              <!----></div>
            <div class="van-cell__value">
              <span>￥ #(order.totalPrice)</span></div>
            <!----></div>
          <div class="order-line-content">
            <div class="order-line"></div>
            <i class="arrow-icon van-icon van-icon-arrow-up">
              <!---->
              <!----></i>
            <div class="order-line2"></div>
          </div>
          <div class="cost-use">
            <div class="cost-use-detail">支付明细</div>
            <!-- <div class="cost-use-account">
              <span style="float: left;">活动优惠</span>
              <span style="float: right;">-￥ 0.00</span>
              <div style="clear: both;"></div>
            </div> -->
            <div class="cost-use-account">
              <span style="float: left;">优惠券减扣</span>
              <span style="float: right;">-￥ #(order.couponPrice??"0.00")</span>
              <div style="clear: both;"></div>
            </div>
            <!---->
            <!-- <div class="cost-use-account">
              <span style="float: left;">手续费</span>
              <span style="float: right;">￥ 0.00</span>
              <div style="clear: both;"></div>
            </div> -->
            <!---->
            <div class="cost-use-actually">
              <span style="float: left;">实付金额</span>
              <span class="use-actually-right" style="color: rgb(42, 101, 170);">￥ #(order.amount)</span>
              <div style="clear: both;"></div>
            </div>
          </div>
        </div>
        <div class="cost-content2">
          <div class="van-cell">
            <!---->
            <div class="van-cell__title">
              <div data-clipboard-text="ODL42627037566" data-clipboard-action="copy" id="copy_btn">
                <span>订单编号</span>
                <!-- <span class="tag-copy van-tag van-tag--plain van-hairline--surround" style="color: rgb(150, 151, 153);">复制</span> --></div>
            </div>
            <div class="van-cell__value">
              <span>#(order.sn)</span></div>
            <!----></div>
          <div class="van-cell">
            <!---->
            <div class="van-cell__title">
              <span>下单时间</span>
              <!----></div>
            <div class="van-cell__value">
              <span>#date(order.createDate,'yyyy-MM-dd HH:mm:ss')</span></div>
            <!----></div>
          <div class="van-cell">
            <!---->
            <div class="van-cell__title">
              <span>支付方式</span>
              <!----></div>
            <div class="van-cell__value">
              <span>#(order.paymentMethodName)</span></div>
            <!----></div>
          <!-- <div class="van-cell">
           
            <div class="van-cell__title">
              <span>物流方式</span>
             </div>
            <div class="van-cell__value">
              <span>亨洋极地线</span></div>
           </div> -->
          <div class="van-cell">
            <!---->
            <div class="van-cell__title">
              <span>发件人</span>
              <!----></div>
            <div class="van-cell__value">
              <span>#(order.senderName)</span></div>
            <!----></div>
            <div class="van-cell">
            <!---->
            <div class="van-cell__title">
              <span>收件人</span>
              <!----></div>
            <div class="van-cell__value">
              <span>#(order.consignee)</span></div>
            <!----></div>
            
          <!----></div>
        <!---->
        <!---->
        <div class="tabbar-content">
        #if(order.statusKey=="PENDING_PAYMENT")
          <button class="van-button van-button--default van-button--small van-button--round" id="cancelOrder">
            <span class="van-button__text">取消支付</span></button>
          <button class="van-button van-button--danger van-button--small van-button--round" id="payOrder">
            <span class="van-button__text">付款<span id="countdownHour2">00</span>:<span id="countdownMinute2">00</span>:<span id="countdownSecond2">00</span></span></button>
        #else if(order.statusKey=="PENDING_SHIPMENT")
        <button class="van-button van-button--default van-button--small van-button--round" id="refundOrder">
            <span class="van-button__text">申请退款</span></button>
        #else if(order.statusKey=="SHIPPED")
         <button class="van-button van-button--default van-button--small van-button--round" onclick="location.href='#(base)/member/pack?orderId=#(order.id)'">
                    <span class="van-button__text">查看包裹</span></button>
        <button class="van-button van-button--default van-button--small van-button--round" id="completeOrder">
            <span class="van-button__text">确认收货</span></button>
        #else if(order.statusKey=="CANCELED")
        <button class="van-button van-button--default van-button--small van-button--round" id="deleteOrder">
            <span class="van-button__text">删除</span></button>
        #end
        </div>
        <!----></div>
    </div>
    <!-- 内容 End -->
    
    
    
    </body>
</html>
<script type="text/javascript">
$("#deleteOrder").on("click",function(){
	if(confirm("确定要删除吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/delete",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});
$("#cancelOrder").on("click",function(){
	if(confirm("确定要取消吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/cancel",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});
$("#refundOrder").on("click",function(){
	if(confirm("确定要申请退款吗?")){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/refund",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.href="#(base)/member/order"
	       		}
	        },
	        error: function(res){
	        }
	    });
	}
});
$("#completeOrder").on("click",function(){
	var orderId = $("#orderId").val();
	$.ajax({
        url: "#(base)/order/receive",
        type: "post",
        data: {"orderId":orderId},
        dataType: "json",
        success: function(res){
        	if(res.type=="success"){
       			location.href="#(base)/member/order"
       		}
        },
        error: function(res){
        }
    });
});
$("#payOrder").on("click",function(){
	var orderId = $("#orderId").val();
	var orderSn = $("#orderSn").val();
	var paymentType = "ORDER";
	location.href="#(base)/payment/pay?paymentMethod=WEIXINPAY_WECHAT&paymentType="+paymentType+"&sn="+orderSn;
});
</script>
<script>
 function orderExpire(){
	// 当前时间
	     var nowTime = new Date();
		// 2016/12/22 hh:mm:ee
		// 结束时间
		var endTime = new Date("#date(order.expireDate,'yyyy/MM/dd HH:mm:ss')");
	// 相差的时间	
	var t = endTime.getTime() - nowTime.getTime();
	if(t<=0){
		var orderId = $("#orderId").val();
		$.ajax({
	        url: "#(base)/order/cancel",
	        type: "post",
	        data: {"orderId":orderId},
	        dataType: "json",
	        success: function(res){
	        	if(res.type=="success"){
	       			location.reload();
	       		}
	        },
	        error: function(res){
	        }
	    });
		return false;
	}

	var d = Math.floor(t/1000/60/60/24);
	
	var h = Math.floor(t/1000/60/60%24);
	var i = Math.floor(t/1000/60%60);
	var s = Math.floor(t/1000%60);
	
	/* document.getElementById('countdownDay').innerHTML = d; */
	document.getElementById('countdownHour').innerHTML = d*24+h;
	document.getElementById('countdownHour2').innerHTML = d*24+h;
	document.getElementById('countdownMinute').innerHTML = i;
	document.getElementById('countdownMinute2').innerHTML = i;
	document.getElementById('countdownSecond').innerHTML = s;
	document.getElementById('countdownSecond2').innerHTML = s;

	setInterval(orderExpire, 1000);
} 
 #if(order.status=="PENDING_PAYMENT")
 orderExpire();
 #end
</script>